<template>
    <div class="warp">
        <van-nav-bar title="我的喜欢" :fixed="true" >
            <i class="iconfont ireturn" slot="left" @click="back"></i>
            <span slot="right" @click="clear" >清空</span>
        </van-nav-bar>
        <div class="v-body">
            <p class="v-notice">{{msg}}</p>
            <van-swipe-cell v-for="(item,key) in collectData" >
              <van-row gutter="10" class="v-item">
                  <van-col span="8" >
                    <a :href="'#/detail/'+item.vid">
                        <div class="v-item-imghd">
                          <img v-lazy="item.vpic" />
                          <span class="v-item-imghd-hot">{{item.vnote}}</span>
                        </div>
                    </a>
                  </van-col>
                  <van-col span="16">
                    <a :href="'#/detail/'+item.vid">
                        <h2>{{item.vname}}</h2>
                        <p>{{item.vpublishyear +'/'}}{{item.vpublisharea+'/'}}{{item.tnamel2}}</p>
                        <p>{{item.hdate}}</p>
                    </a>
                  </van-col>
                </van-row>
              <template slot="right">
                <van-button @click="delCollect(item.vid)" square type="danger" text="删除" class="v-swipe-del"/>
              </template>
            </van-swipe-cell>
        </div>
        <BackTop />
    </div>
</template>
<script>
export default {
  name: "collect",
  components: {
  },
  data() {
    return {
      collectData:[],
      msg:'',
    };
  },
  methods: {
    back() {
      this.$back();
    },
    loadCollectData(){
      this.collectData =  vshow.collect.getCollectData();
      if(Object.keys(this.collectData).length > 0){
          this.msg = '';
      }else{
          this.msg = '无喜欢影片';
      }
    },
    delCollect(vid){
      vshow.collect.removeCollectData(vid);
      this.loadCollectData();
    },
    clear(){
      vshow.collect.clearCollectData();
      this.loadCollectData();
    }
  },
  mounted() {
    this.loadCollectData();
  }
};
</script>
<style lang="less" >
</style>
